@import '@common/styles/index.scss';

.placeholderH5{
  width: 100%;
  height: rem(258);background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}
.placeholderPC{
  width: 100%;
  height: rem(532);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}
.placeholderH5,.placeholderPC{
  background-image: url("");
}


.container {
  width: 100%;

  img {
    border-radius: rem($border-radius-small);
    object-fit: cover;
    background-color: $body-bg-color;
    width: 100%;
    height: 100%;
  }

  .flatItem{
    &:not(:last-child) {
      margin-bottom: rem(10);
    }
  }

  .containerNum5 {
    .bigImages {
      height: rem(126);
      margin-bottom: 4px !important;
      .col {
        height: 100%;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
      }
    }
    .smallImages {
      height: rem(111);
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      .col {
        position: relative;
        height: 100%;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
      }
    }
  }

  .containerNum4 {
    height: rem(260);
    margin-bottom: 0 !important;
    .col {
      height: 100%;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }
    .smallCol {
      height: 33.33%;
    }
    .smallRow {
      width: 100%;
    }
  }

  .containerNum3 {

    &.panorama,
    &.transverse{
      .bigImages {
        height: rem(126);
        margin-bottom: 4px;
      }
      .smallImages {
        height: rem(126);
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        .col {
          height: 100%;
          padding-top: 0 !important;
          padding-bottom: 0 !important;
        }
      }
    }

    &.long,
    &.longitudinal{
      height: rem(258);
      .col {
        height: rem(258);
        padding-top: 0 !important;
        padding-bottom: 0 !important;
      }
      .smallCol {
        height: calc(50% + 2px);
      }
      .smallRow{
        width: 100%;
        height: 100%;
      }
    }
  }

  .containerNum2 {
    height: rem(260);
    margin-bottom: 0 !important;
    &.panorama{
      height: rem(193);
    }
    &.transverse{
      height: rem(260);
    }
    &.long{
      height: rem(260);
    }
    &.longitudinal{
      height: rem(260);
    }
    .col {
      height: 100%;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }
  }

  .containerNum1 {
    height: rem(260);
    &.panorama{
      width: 100%;
      height: rem(193);
    }
    &.transverse{
      width: 100%;
      height: rem(260);
    }
    &.long{
      width: rem(170);
      height: rem(260);
    }
    &.longitudinal{
      width: rem(170);
      height: rem(260);
    }

  }
}

.containerPC {
  width: 100%;

  img {
    @include cursor-on-pc;
    border-radius: rem($border-radius-small);
    object-fit: cover;
    background-color: $body-bg-color;
    width: 100%;
    height: 100%;
  }

  .flatItem{
    &:not(:last-child) {
      margin-bottom: rem(10);
    }
  }

  .containerNum5 {
    .bigImages {
      height: rem(262);
      margin-bottom: rem(6) !important;
      .col {
        height: 100%;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
      }
    }
    .smallImages {
      height: rem(232);
      margin-bottom: 0 !important;
      .col {
        position: relative;
        height: 100%;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
      }
    }
  }

  .containerNum4 {
    height: rem(532);
    margin-bottom: 0 !important;
    .col {
      height: 100%;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }
    .smallCol {
      height: 33.33%;
    }
    .smallRow {
      width: 100%;
    }
  }

  .containerNum3 {
    &.panorama,
    &.transverse{
      .bigImages {
        height: rem(266);
        margin-bottom: rem(6);
      }
      .smallImages {
        height: rem(262);
        margin-bottom: 0 !important;
        .col {
          height: 100%;
          padding-top: 0 !important;
          padding-bottom: 0 !important;
        }
      }
    }

    &.long,
    &.longitudinal{
      height: rem(532);
      .col {
        height: rem(532);
        padding-top: 0 !important;
        padding-bottom: 0 !important;
      }
      .smallCol {
        height: calc(50% + 2px);
      }
      .smallRow{
        width: 100%;
        height: 100%;
      }
    }

  }

  .containerNum2 {
    height: rem(532);
    margin-bottom: 0 !important;
    &.panorama{
      height: rem(395);
    }
    &.transverse{
      height: rem(532);
    }
    &.long{
      height: rem(532);
    }
    &.longitudinal{
      height: rem(532);
    }
    .col {
      height: 100%;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }
  }

  .containerNum1 {
    height: rem(532);
    &.panorama{
      width: 100%;
      height: rem(395);
    }
    &.transverse{
      width: 100%;
      height: rem(532);
    }
    &.long{
      width: rem(349);
      height: rem(532);
    }
    &.longitudinal{
      width: rem(349);
      height: rem(532);
    }
  }
}

.modalBox {
  position: absolute;
  top: 0;
  right: rem(2);
  left: rem(2);
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: rem($font-size-large);
  color: $white;
  border-radius: rem($border-radius-small);
  background-color: rgba(0, 0, 0, 0.5);
}














